import React from "react";
import commonStyles from "./common.module.scss";
import { Form, Radio } from "antd";

type PropsType = {
  id: string;
  props: {
    title: string;
    prompt?: string;
    options: Array<{
      label: string;
      value: string;
    }>;
    value: string;
    isVertical: boolean;
    isRequired?: boolean;
    answer?: string;
  };
};

const QuestionRadio: React.FC<PropsType> = ({ id, props }) => {
  const {
    title,
    prompt,
    options = [],
    value,
    isVertical,
    isRequired,
    answer,
  } = props;
  const formatOptions = options.map((i) => ({
    label: (
      <span
        style={{
          color:
            answer && answer === i.value
              ? prompt === i.value
                ? "#52c41a"
                : "#ff4d4f"
              : "black",
        }}
      >
        {i.label}
      </span>
    ),
    value: i.value,
  }));
  const item = options.find((i) => i.value === prompt);
  const formatPrompt = item ? item.label : prompt;

  return (
    <Form.Item
      label={title}
      name={id}
      initialValue={value}
      rules={[{ required: !!isRequired, message: "不能为空" }]}
      className={`${isVertical ? commonStyles.vertical : ""} ${
        commonStyles.h5
      }`}
    >
      <div className={commonStyles.content}>
        <Radio.Group
          options={formatOptions}
          disabled={!!answer || answer === ""}
          defaultValue={answer || value}
        />
        {(answer || answer === "") && (
          <div
            style={{
              color: "#52c41a",
            }}
          >
            提示答案：{formatPrompt}
          </div>
        )}
      </div>
    </Form.Item>
  );
};

export default QuestionRadio;
